import React from "react";
import {NavItem} from "@/common/header/style";
import {Avatar, Col, Row} from "antd";
import Config from "@/config";
import {PoweroffOutlined, SolutionOutlined, UploadOutlined} from "@ant-design/icons";

const MinePopover = (props) => {
    let that = props.that;
    let {PushToMine, PushToUploadGame, handleClickLoginOut} = that;
    let userInfo = props.userInfo;
    return <>
        <NavItem className='mine'>
            <Avatar
                style={{userSelect: "none"}}
                src={userInfo.images}>
                {userInfo.onlineName}
            </Avatar>
        </NavItem>
        <ul>
            <li>
                <div className={"liStyle"}
                     onClick={PushToMine}>
                        <span style={{width: '50px'}}>
                            <SolutionOutlined style={{fontSize: '12px', marginRight: '5px'}}/>
                            个人中心
                        </span>
                </div>
            </li>
            <li>
                <div className={"liStyle"} onClick={() => handleClickLoginOut(true)}>
                        <span style={{width: '50px'}}>
                            <PoweroffOutlined style={{fontSize: '12px', marginRight: '5px'}}/>
                            退出登录
                        </span>
                </div>
            </li>
            <li>
                <div className={"liStyle"} onClick={PushToUploadGame}>
                        <span style={{width: '50px'}}>
                            <UploadOutlined style={{fontSize: '12px', marginRight: '5px'}}/>
                            上传游戏
                        </span>
                </div>
            </li>
            <li style={{marginTop: '10px', borderBottom: '1px solid #dbdbdb'}}/>
            <li>
                <div className={"liMoreStyle"}>
                    <div>
                        <Row gutter={[16, 16]}>
                            <Col span={14}>
                                <Config.IconFont type={'icon-jinbi'} style={{
                                    fontSize: '18px',
                                    marginRight: '5px',
                                    lineHeight: '20px',
                                    textAlign: 'left'
                                }}/>
                                JCoins：
                            </Col>
                            <Col span={10}>
                                    <span style={{
                                        color: '#666',
                                        textAlign: 'left',
                                        lineHeight: '20px'
                                    }}>{userInfo.jcoins}</span>
                            </Col>
                        </Row>
                    </div>
                </div>
                <div className={"liMoreStyle"}>
                    <div>
                        <Row gutter={[16, 16]}>
                            <Col span={14}>
                                <Config.IconFont type={'icon-jifen'} style={{
                                    fontSize: '17px',
                                    marginRight: '5px',
                                    lineHeight: '20px',
                                    textAlign: 'left'
                                }}/>
                                积分：
                            </Col>
                            <Col span={10}>
                                    <span style={{
                                        textAlign: 'left',
                                        color: '#666',
                                        lineHeight: '20px'
                                    }}>{userInfo.onlineIntegral}</span>
                            </Col>
                        </Row>
                    </div>
                </div>
            </li>
        </ul>
    </>
}
export default MinePopover;
